Как правильно использовать H1

[psywalker]

Я давно использую заголовок Первого уровня (h1), для Логотипа-картинки обрамлённого в ссылку. Выглядит это примерно так:

<h1><a href="#"><img src="img/logo-trans.png" alt="Acgroup" /></a> — недвижмость за рубежом</h1>

Но сегодня у меня с одним знакомым зашёл спор о том, правильно ли это или нет. Дорогие эксперты, помогите разобраться и ответить на вопросы:

1) Можно ли использовать заголовок первого уровня для этой цели?

2) Правильно ли это со стороны семантики, да и вообще?

3) Часто замечаю, что многие используют такую конструкцию:

<div class="logo">

, но по-мне это как то неправильно и добавляет лишний элемент с классом.

4) Как правильно всё таки писать Логотип и H1? и можно ли их совмещать?

Заранее спасибо!

[rash]

H1 - это заголовок, а не логотип -)

На мой взгляд, можно поместить логотип в заголовок, но текстовая часть заголовка обязательно должна находиться в H1.

Как-то вот так:

<h1><div class="logo"><img src="#" height="y" width="x" alt=""></div> Текст заголовка</h1>

Ну это просто потому что так часто бывает удобнее, а вообще вынести логотип из заголовка было бы лучше.

[Павел Билькис]

Это по твоему усмотрению. Лично мне нравится добовлять в h2 и лого делать не картинкой и фоном. А иногда можно и прсото картинкой.

[psywalker]

rash

H1 - это заголовок, а не логотип -)

На мой взгляд, можно поместить логотип в заголовок, но текстовая часть заголовка обязательно должна находиться в H1.

Как-то вот так:

HTML

<h1><div class="logo"><img src="#" height="y" width="x" alt=""></div> Текст заголовка</h1>

Ну это просто потому что так часто бывает удобнее, а вообще вынести логотип из заголовка было бы лучше.

1) А если текстовая часть будет в H1, то это нормально для Поисковиков?

2) Мне не нравится такой способ из-за кучи лишних блоков, а почему бы вообще например не сделать логотив в А?

Павел Билькис

Это по твоему усмотрению. Лично мне нравится добовлять в h2 и лого делать не картинкой и фоном. А иногда можно и прсото картинкой.

А правильно ли вообще считается делать Фоном? Я слышал, что вроде лучше Картинкой?

Edited August 3, 2009 by psywalker

[LunatiK]

<div class="logo">

тогда уж не class, а

<div id="logo">

У вас же не группа логотипов, а он один на странице. да и бывают случаи когда в зависимости от разде логотип немного видоизменяется.

Удобней доступ из JavaScript

[Павел Билькис]

А правильно ли вообще считается делать Фоном? Я слышал, что вроде лучше Картинкой?

Ктулху знает все! На равне с педивики

[rash]

<div class="logo">

тогда уж не class, а

<div id="logo">

У вас же не группа логотипов, а он один на странице. да и бывают случаи когда в зависимости от разде логотип немного видоизменяется.

Удобней доступ из JavaScript

Тогда уж class="logo" и id="logo". Оформление - по классу, доступ скриптам - по id.

[LunatiK]

Тогда уж class="logo" и id="logo". Оформление - по классу, доступ скриптам - по id.

Нужна ли эта принципиальная избыточность ?

[rash]

Нужна ли эта принципиальная избыточность ?

Конечно, назначать стили по id вообще плохая идея...

[LunatiK]

Чем же она плоха ? когда мы заведомо знаем что объект уникален.

[rash]

Чем же она плоха ? когда мы заведомо знаем что объект уникален.

Более высокой специфичностью. Переопределить такой стиль добавлением класса-модификатора становится сложнее.

Тем более, что бывают (да, редко) случаи, когда элемент, который казался уникальным, встречается несколько раз. Ну это можно не брать в рачет.

[LunatiK]

Более высокой специфичностью. Переопределить такой стиль добавлением класса-модификатора становится сложнее.

Тем более, что бывают (да, редко) случаи, когда элемент, который казался уникальным, встречается несколько раз. Ну это можно не брать в рачет.

Если всё ещё в теме, мы здесь рассматриваем блок с логотипом, и все слова относятся именно к такому блоку, а не к другому «уникальному» элементу.

Логотип эта картинка каторая меняется только при ребрендинге, либо при смене дизайна и в обоих случаях переопределять стиль не требуется, там меняется всё, что к делу уже не относится.

А если нужно подвинуть в право-влево вверх-вниз логотип, то не всё ли равно куда вы будете писать новые координаты объекта?

Я вобщем-то с вами не спорю, ибо это такая мелочь и большой смысловой нагрузки не имеет.

Вобщем-то по теме:

Беря в расчёт всё выше сказанное и ваш вариант с избыточностью(по моему непереубеждённому не принципиальному мнению), то логотипы всё-же следует вставлять так:

<div class="logo" id="logo"><a href="ссылкакуданадо"><img src="logo.png" alt="Логотип" /></a></div>

и я считаю не правильным использование тегя <h1> вместо <div> потому, что:

Н1 - это заголовок первого уровня

сравнивая сайт с книгой, загляните в книгу, там где содержание, вы там найдёте заголовки первого уровня и под заголовки

заголовки - это название разделов книги, но ни как не название самой книги, и тем более к картинке на обложке оно отношение никакого не имеет, а название сайта в данном контексте сродни названию книги.

по поводу «отказаться вообще от <div> и оставить всё просто в <a>, считаю допустимым, но с точки зрения разметки сайта мало логичным

[rus]

Н1 - это заголовок первого уровня

сравнивая сайт с книгой, загляните в книгу, там где содержание, вы там найдёте заголовки первого уровня и под заголовки

заголовки - это название разделов книги, но ни как не название самой книги, и тем более к картинке на обложке оно отношение никакого не имеет, а название сайта в данном контексте сродни названию книги.

Эээ..., H1 нужен для поисковиков и ты это не хуже меня и остальных знаешь.

И о чем тогда речь? О книге? Только в плане информативности и читабельности.

[s0rr0w]

Это самый ужасный пример использования h1, который я видел.

Код страницы делится на контентную часть и разметку страницы.

H1 используется только в контенте, и его предназначение - указать заголовок всей страницы, считай всего контента страницы.

Попробуйте понять структуру сайта по h1 с точки зрения машины

1. Компания "Рога и Копыта"

1.1. Компания "Рога и Копыта"

1.1. Компания "Рога и Копыта"

2. Компания "Рога и Копыта"

3. Компания "Рога и Копыта"

И вот так

1. Направление деятельности

1.1. Товары народного потребления

1.2. Услуги компании

2. О компании

3. Контактная информация

[rus]

s0rr0w

А как же оптимизация?

[mini]

Это конечно лично моё мнение, я делаю так!

Вообщето я ЛОГО делаю через тег "STRONG", но иногда использую и "h1". Обьсняю почему беру "h1", как мне известно на странице допускается только один тег "h1" и должно соблюдать поочередность тегов h1 потом h2, h3..., тоесть если я вижу по дизайну что эти условие не соблюдаются тогда "h1" кидаю на ЛОГО.

[rus]

Мда..., беру слова назад. Полазил, погуглил, и вот нарыл сайт где сделано более правильно по крайней мере с точки зрения оптимизации (см. лого).

[s0rr0w]

А как же оптимизация?

Мне плевать на любые "оптимизации", которые не имеют четкого алгоритма за спиной.

Контент есть контент, это самое главное на странице. H1 - заглавие контента страницы.

[psywalker]

Выслушав ваши мнения я подведу итог, если я правильно понял, то:

1) Заголовок H1 ни в коем случае нельзя использовать для логотипа?

2) Заголовок Н1 нужен только для Контента?

3) Логотип должен выглядеть так:

<div class="logo" id="logo"><a href="ссылка"><img src="logo.png" alt="Лого" /></a></div>

? или

<div class="logo"><a href="ссылка"><img src="logo.png" alt="Логотип" /></a></div>

(без id)?

4) И всё таки хотелось бы уточнить: Можно использовать просто "А", а в ней картинка-логотип?

[s0rr0w]

1) Заголовок H1 ни в коем случае нельзя использовать для логотипа?

Да

2) Заголовок Н1 нужен только для Контента?

Да

3) Логотип должен выглядеть так:

<div class="logo" id="logo"><a href="ссылка"><img src="logo.png" alt="Лого" /></a></div>

? или

<div class="logo"><a href="ссылка"><img src="logo.png" alt="Логотип" /></a></div>

(без id)?

4) И всё таки хотелось бы уточнить: Можно использовать просто "А", а в ней картинка-логотип?

<a href="#" class="logo"> </a>

.logo{ background: url(logo.png) no-repeat;}

[psywalker]

s0rr0w

Спасибо, а тогда вопрос:

<a href="#" class="logo"> </a>

.logo{ background: url(logo.png) no-repeat;}

А разве можно использовать фон вместо ИМГ? я вроде слышал, что наоборот нужно что-бы логотип был именно картинкой, ну например для того, что-бы его можно было скачать при желании и вообще?

[Павел Билькис]

Эм. Ты слышал об авторских правах на логотипы?

[s0rr0w]

s0rr0w

Спасибо, а тогда вопрос:

А разве можно использовать фон вместо ИМГ? я вроде слышал, что наоборот нужно что-бы логотип был именно картинкой, ну например для того, что-бы его можно было скачать при желании и вообще?

Адекватные компании предоставляют логотипы в векторном виде по запросу, который можно сделать на отдельной странице.

И вообще, лучше думать своей головой, чем бездумно воспринимать чужие идеи. Все имеет толику правды, только иногда побольше, а иногда совсем чуток

[psywalker]

Павел Билькис

Эм. Ты слышал об авторских правах на логотипы?

Не понял, о чём ты?

s0rr0w

И вообще, лучше думать своей головой, чем бездумно воспринимать чужие идеи. Все имеет толику правды, только иногда побольше, а иногда совсем чуток

Согласен, всегда стараюсь думать, но также часто просматриваю форум и не раз уже слышал от экспертов, что логотип нужно делать "ИМГ" а не фоном, поэтому и возникли сомнения

[LunatiK]

Эээ..., H1 нужен для поисковиков и ты это не хуже меня и остальных знаешь.

И о чем тогда речь? О книге? Только в плане информативности и читабельности.

Есть мнение (некоторых SEO) специалистов, что черезмерное и не правильно использование этого тега может привести к бану. Так что нужен то он нужен, только на своём месте.

———————————-

Фоном или картинкой это не кретично, просто если картинкой с нужными альтами то есть шанс что при запросе в поиске (к примеру в яндексе) можно лишний раз помоячить своим логотипом в яндексюкартинках

а так не суть важно.

Edited August 4, 2009 by LunatiK